<template>
  <el-container class="container">
    <el-header height="60px">
      <front-head-bar v-on:headCall="getChildrenData"></front-head-bar>
    </el-header>
    <el-main>
      <index v-show="'1' === this.activeIndex"></index>
      <person-article v-show="'2' === this.activeIndex"></person-article>
    </el-main>
    <el-footer height="110px">Footer</el-footer>
  </el-container>
</template>

<script>
  import FrontHeadBar from './HeadBar/FrontHeadBar'
  import Index from './Main/Index'
  import PersonArticle from "./Main/PersonArticle";
  export default {
    name: 'Home',
    components: {
      PersonArticle,
      FrontHeadBar,
      Index
    },
    data () {
      return {
        minHeight: 0,
        activeIndex: '1',
      }
    },
    methods: {
      getChildrenData: function (data) {
        console.log(data);
        this.activeIndex = data;
        console.info(this.activeIndex)
      }
    },
    mounted () {
      this.minHeight = document.documentElement.clientHeight -190
      console.info(this.minHeight)
      var that = this
      window.onresize = function () {
        this.minHeight = document.documentElement.clientHeight - 190
      }
    }
  }
</script>
<style>
  .container {
    padding: 0px;
    margin: 0px;
  }
  .el-header, .el-footer {
    background-color: #2F4056;
    color: #333;
    height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
</style>
